<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<style>
    .main{
        width: 50%;
        margin: 30px auto;
    }

    .time-axis {
        margin: 0;
        padding: 0;
        position: relative;
    }

    .time-axis:before {
        content: '';
        position: absolute;
        left: 93px;
        top: 15px;
        width: 1px;
        height: 100%;
        background-color: #E4E4E4;
    }

    .time-axis-item {
        list-style: none;
        padding-left: 150px;
        position: relative;
        line-height: 45px;
        font-size: 14px;
        color: #141414;
    }

    .time-axis-achievement {
        margin: 0;
    }

    .time-axis-date {
        position: absolute;
        left: -81px;
        top: 0;
        color: #666;
    }

    .time-axis-date span {
        position: absolute;
        right: -49px;
        top: 35%;
        display: block;
        width: 13px;
        height: 13px;
        border: 1px solid #ccc;
        border-radius: 100%;
        background-color: #fff;
    }

    .time-axis-date span:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 7px;
        height: 7px;
        margin: auto;
        background-color: #ccc;
        border: 1px solid #ccc;
        border-radius: 100%;
    }

    .time-axis-item:last-child .time-axis-date span {
        border-color: #48BEB2;
    }

    .time-axis-item:last-child .time-axis-date span:after {
        background-color: #48BEB2;
        border-color: #48BEB2;
    }

    .time-axis-title {
        font-size: 16px;
        font-weight: bold;
    }
</style>

<div class="main">
    <ul class="time-axis">
        <c:forEach items="${logList}" var="log">
            <li class="time-axis-item">
                <div class="time-axis-date">${log.datetime}<span></span></div>
                <div class="time-axis-title">${log.processes}</div>
                <p class="time-axis-achievement">办理对象 : ${log.transactor}</p>
            </li>
        </c:forEach>
    </ul>
</div>